import { useEffect, useRef, useState } from 'react';
import './rightBottom.css'
import * as echarts from 'echarts';
import { getliudong } from '../../../request';
import Myecharts from '../../common/myecharts/myecharts';

const RightBottom = () => {
    // let rbbox = useRef(null)
    const [option, setoption] = useState({
        legend: {
            // 图例字体颜色
            textStyle: {
                color: '#fff',
            },
            // 图例形状
            icon: 'circle'
        },
        tooltip: {},
        dataset: {
            dimensions: ['product'],
            source: [
                { product: 'aa', 2015: 43.3, 2016: 85.8, 2017: 93.7 },
                { product: 'aa', 2015: 83.1, 2016: 73.4, 2017: 55.1 },
                { product: 'aa', 2015: 86.4, 2016: 65.2, 2017: 82.5 },
                { product: 'aa', 2015: 72.4, 2016: 53.9, 2017: 39.1 }
            ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
            {
                type: 'bar',
                
                itemStyle: {
                    // 柱子颜色渐变
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#2a37ff' },
                        { offset: 0.5, color: '#711cff' },
                        { offset: 1, color: '#b205ff' }]),
                        // 圆弧
                    barBorderRadius: 15,
                },
                // 柱子粗细
                barWidth: '15%',
            },
            {
                type: 'bar',
                itemStyle: {
                    // 柱子颜色 单色
                    color: '#38da84',
                    barBorderRadius: 15,
                },
                barWidth: '15%',
            }]
    })

    useEffect(() => {
        // const myChart = echarts.init(rbbox.current);
        getliudong().then(res => {
            // console.log('流动', res.data.data)
            option.dataset.dimensions = res.data.data.result[0].dimensions
            // console.log(option.dataset.dimensions,3343)
            option.dataset.source = res.data.data.result[0].source
            // console.log(option.dataset.source, 2131312)
            setoption({...option})
            // myChart.setOption(option)
        })
    }, [])

    return (
        <div className='rb'>
            <div className='rb-title'>
                <div>校园人员流动情况</div>
            </div>
            <div className='rb-main'>
                {/* 访客 */}
                <div className='rb-fk'>
                    <div className='rbfim'>
                        <div>
                            <img src={require('../../../assets/images/yestoday.png')} alt=''></img>
                        </div>
                        <div style={{ marginLeft: '8px', textAlign: 'center' }}>
                            <div>1</div>
                            <div>昨日访客</div>
                        </div>
                    </div>
                    <div className='rbfim'>
                        <div>
                            <img src={require('../../../assets/images/today.png')} alt=''></img>
                        </div>
                        <div style={{ marginLeft: '8px', textAlign: 'center' }}>
                            <div>1</div>
                            <div>今日访客</div>
                        </div>
                    </div>
                </div>
                {/* 流动图表 */}
                <div className='rb-echarts'>
                    <Myecharts option={option}></Myecharts>
                </div>
            </div>
        </div>
    )
}
export default RightBottom;